<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  
  const list = ref<any[]>([])
  const savePath = ref('')
  const successNumber = ref(0)
  const errorNumber = ref(0)
  const isComplete = ref(true)
  
  onMounted(() => {
    window.ipcRenderer.send('view-readly')
  
    window.ipcRenderer.on('list-readly', (_event, data) => {
      if (!data || !data.length) return
      isComplete.value = false
      successNumber.value = 0
      errorNumber.value = 0
      list.value = data.map((item: any) => {
        item.status = '等待中...'
        return item
      })
    })
  
    window.ipcRenderer.on('list-updata', (_event, data) => {
      if (!data || !data.status) return
      list.value[data.index].status = data.status
      if (data.status === 'success') {
        successNumber.value++
      } else if (data.status === 'error') {
        errorNumber.value++
      }
    })
  
    window.ipcRenderer.on('save-path-updata', (_event, data) => {
      if (data) {
        savePath.value = data
      }
    })
  
    window.ipcRenderer.on('download-complete', (_event) => {
      alert('下载完成')
      isComplete.value = true
    })
  })
  
  const handleUpload = () => {
    if (!savePath.value) {
      alert('请先选择图片保存路径')
      return
    }
    const input = document.createElement('input')
    input.setAttribute('type', 'file')
    input.setAttribute('accept', '.xlsx,.xls')
    input.addEventListener('change', () => {
      if (input.files && input.files.length > 0) {
        window.ipcRenderer.send('file-readly', input.files[0].path)
      }
    })
    input.click()
  }
  
  const handleSetSavePath = () => {
    window.ipcRenderer.send('set-save-path')
  }
  </script>
  
  <template>
    <div class="w-full h-full flex flex-col items-center">
      <div class="w-full p-[32px] flex items-center flex-wrap">
        <span class="text-[12px]">下载路径：</span>
        <span class="text-[12px] flex items-center w-max px-[12px] py-[4px] bg-[#f5f7fa] border border-[#e4e7ed] cursor-not-allowed text-[#a8abb2] select-none rounded-[2px] whitespace-normal">{{ savePath || '请选择图片保存路径' }}</span>
        <div class="ml-[24px] w-[48px] h-[24px] flex items-center justify-center bg-[#626aef] cursor-pointer text-[12px] text-[#fff] rounded-[2px]" @click="handleSetSavePath">选择</div>
      </div>
      <template v-if="isComplete">
        <div class="mb-[24px]">
          <svg t="1745029889634" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9412" width="64" height="64"><path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01" p-id="9413"></path><path d="M102.4 68.266667a34.133333 34.133333 0 0 1 34.133333-34.133334h750.933334a34.133333 34.133333 0 0 1 34.133333 34.133334v634.402133a34.133333 34.133333 0 0 1-10.001067 24.132267l-253.064533 253.064533a34.133333 34.133333 0 0 1-24.132267 10.001067H136.533333a34.133333 34.133333 0 0 1-34.133333-34.133334V68.266667z" fill="#11AA66" p-id="9414"></path><path d="M238.933333 238.933333a34.133333 34.133333 0 0 1 34.133334-34.133333h477.866666a34.133333 34.133333 0 1 1 0 68.266667H273.066667a34.133333 34.133333 0 0 1-34.133334-34.133334z m0 204.8a34.133333 34.133333 0 0 1 34.133334-34.133333h477.866666a34.133333 34.133333 0 1 1 0 68.266667H273.066667a34.133333 34.133333 0 0 1-34.133334-34.133334z m34.133334 170.666667a34.133333 34.133333 0 1 0 0 68.266667h204.8a34.133333 34.133333 0 1 0 0-68.266667H273.066667z" fill="#FFFFFF" p-id="9415"></path><path d="M648.533333 750.933333a34.133333 34.133333 0 0 1 34.133334-34.133333h230.7072a3.413333 3.413333 0 0 1 2.389333 5.802667l-261.393067 261.461333a3.413333 3.413333 0 0 1-5.8368-2.423467V750.933333z" fill="#FFAA44" p-id="9416"></path></svg>
        </div>
        <div class="w-[96px] h-[32px] flex items-center justify-center bg-[#626aef] cursor-pointer text-[12px] text-[#fff] rounded-[2px]" @click="handleUpload">上传Excel</div>
      </template>
      <div class="w-full h-full flex p-[32px]">
        <div class="w-full flex flex-col">
          <div class="w-full h-full border border-[#ebeef5]">
            <div class="w-full h-[40px] flex text-[14px] font-bold text-[#909399] border-b border-[#ebeef5]">
              <div class="w-[120px] h-full flex items-center justify-center border-r border-[#ebeef5]">
                <span>姓名</span>
              </div>
              <div class="w-[180px] h-full flex items-center justify-center border-r border-[#ebeef5]">
                <span>账号</span>
              </div>
              <div class="w-[120px] h-full flex items-center justify-center border-r border-[#ebeef5]">
                <span>密码</span>
              </div>
              <div class="flex-1 h-full flex items-center justify-center">
                <span>状态</span>
              </div>
            </div>
            <div class="h-[400px] overflow-y-auto">
              <div
                class="w-full h-[40px] flex text-[14px] text-[#606266] border-[#ebeef5]"
                :class="{
                  ' border-t': index !== 0
                }"
                v-for="(item, index) in list"
                :key="index"
              >
                <div class="w-[120px] h-full flex items-center justify-center border-r border-[#ebeef5]">
                  <span>{{ item.name }}</span>
                </div>
                <div class="w-[180px] h-full flex items-center justify-center border-r border-[#ebeef5]">
                  <span>{{ item.username }}</span>
                </div>
                <div class="w-[120px] h-full flex items-center justify-center border-r border-[#ebeef5]">
                  <span>{{ item.password }}</span>
                </div>
                <div class="flex-1 h-full flex items-center justify-center">
                  <span v-if="item.status === 'success'" class="text-[#409EFF]">{{ item.status }}</span>
                  <span v-else-if="item.status === 'error'" class="text-[#F56C6C]">{{ item.status }}</span>
                  <span v-else>{{ item.status }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="w-full flex items-center gap-[24px] mt-[32px] text-[16px]">
            <span>成功：{{ successNumber }}</span>
            <span>失败：{{ errorNumber }}</span>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <style scoped lang="scss"></style>
  